<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>教师主页</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/page/teacher/css/common.css">
</head>
<body>
<div id="teacher-app">
    <!-- 错误气泡提示 -->
    <div class="error-tip" v-if="error">
        <span class="error-icon">!</span>
        <span class="error-message">{{ error }}</span>
    </div>

    <!-- 成功气泡提示 -->
    <div class="success-tip" v-if="resp">
        <span class="success-icon">✓</span>
        <span class="success-message">{{ resp }}</span>
    </div>

    <!-- 加载动画 -->
    <div class="loading-overlay" v-if="loading">
        <div class="loading-spinner"></div>
    </div>

    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="navbar-brand">成绩管理系统-教师主页</div>
        <div class="navbar-user">
            <span class="user-name">${sessionScope.userName}</span>
            <button class="btn btn-primary" @click="logout">注销</button>
        </div>
    </nav>

    <div class="container">
        <div class="main-layout">
            <!-- 左侧菜单 -->
            <nav class="sidebar">
                <div class="sidebar-menu">
                    <ul>
                        <li>
                            <a href="#" @click="activeView='courses'">查询所带课程</a>
                        </li>
                        <li>
                            <a href="#" @click="activeView='statistics'">查看班级成绩统计</a>
                        </li>
                        <li>
                            <a href="#" @click="activeView='grades'">录入成绩</a>
                        </li>
                        <li>
                            <a href="#" @click="activeView='me'">个人详细信息</a>
                        </li>
                        <li>
                            <a href="#" @click="activeView='password'">修改密码</a>
                        </li>
                    </ul>
                </div>
            </nav>

            <!-- 主内容区域 -->
            <main class="main-content">
                <!-- 查询所带课程 -->
                <div v-if="activeView==='courses'" class="content-section">
                    <h2>查询所带课程</h2>
                    <div class="card">
                        <div class="card-body">
                            <div class="courses-container">
                                <div class="courses-grid">
                                    <div class="course-card" v-for="schedule in schedules" :key="schedule.scheduleId">
                                        <div class="course-header">
                                            <h3>{{ schedule.courseName }}</h3>
                                            <span class="course-code">{{ schedule.courseCode }}</span>
                                        </div>
                                        <div class="course-details">
                                            <div class="detail-row">
                                                <span class="label">学分:</span>
                                                <span class="value">{{ schedule.credit }}</span>
                                            </div>
                                            <div class="detail-row">
                                                <span class="label">班级:</span>
                                                <span class="value">{{ schedule.className }} ({{ schedule.classCode }})</span>
                                            </div>
                                            <div class="detail-row">
                                                <span class="label">专业:</span>
                                                <span class="value">{{ schedule.majorName }}</span>
                                            </div>
                                            <div class="detail-row">
                                                <span class="label">学院:</span>
                                                <span class="value">{{ schedule.collegeName }}</span>
                                            </div>
                                            <div class="detail-row">
                                                <span class="label">学期:</span>
                                                <span class="value">{{ schedule.semester }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div v-if="schedules === 0" class="no-courses">
                                    <p>暂无课程安排</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- 查看班级成绩统计 -->
                <div v-if="activeView==='statistics'" class="content-section">
                    <h2>班级成绩统计</h2>
                    <div class="card">
                        <div class="card-body">
                            <label>
                                <select class="schedule-select" v-model="selectedSchedule" @change="loadStatistics(selectedSchedule)">
                                    <option value="">请选择所带课程</option>
                                    <option v-for="schedule in schedules" :key="schedule.scheduleId" :value="schedule.scheduleId">{{ schedule.courseName }} ({{ schedule.className }})</option>
                                </select>
                            </label>
                            <div class="statistics-summary">
                                <div class="summary-item">
                                    <span class="summary-label">班级平均分:</span>
                                    <span class="summary-value">{{ classAverage !== null ? classAverage.toFixed(2) : '暂无数据' }}</span>
                                </div>
                                <div class="summary-item">
                                    <span class="summary-label">最高分:</span>
                                    <span class="summary-value">{{ classMaxScore !== null ? classMaxScore : '暂无数据' }}</span>
                                </div>
                            </div>
                            <div class="statistics-container">
                                <table class="statistics-table">
                                    <thead>
                                        <tr>
                                            <th>学号</th>
                                            <th>姓名</th>
                                            <th>成绩</th>
                                            <th>考试日期</th>
                                            <th>学分</th>
                                            <th>学期</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="stat in statistics" :key="stat.studentNo">
                                            <td>{{ stat.studentNo }}</td>
                                            <td>{{ stat.studentName }}</td>
                                            <td v-if="stat.score !== undefined && stat.score >= 60">{{ stat.score }}</td>
                                            <td v-else-if="stat.score < 60" style="color: red;font-style: italic;">{{ stat.score }}</td>
                                            <td v-else style="color: red;font-style: italic;">未录入</td>
                                            <td v-if="stat.examDate !== undefined">{{ stat.examDate }}</td>
                                            <td v-else style="color: red;font-style: italic;">未录入</td>
                                            <td>{{ stat.credit }}</td>
                                            <td>{{ stat.semester }}</td>
                                        </tr>
                                        <tr v-if="!statistics || statistics.length === 0">
                                            <td colspan="8" style="text-align: center">暂无数据</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 录入成绩 -->
                <div v-if="activeView==='grades'" class="content-section">
                    <h2>录入成绩</h2>
                    <div class="card">
                        <div class="card-body">
                            <label>
                                <select class="schedule-select" v-model="selectedSchedule" @change="loadStatistics(selectedSchedule)">
                                    <option value="">请选择所带课程</option>
                                    <option v-for="schedule in schedules" :key="schedule.scheduleId" :value="schedule.scheduleId">{{ schedule.courseName }} ({{ schedule.className }})</option>
                                </select>
                            </label>
                            <button class="btn btn-primary" @click="saveGrade(statistics)">保存</button>
                            <div class="statistics-container">
                                <table class="statistics-table">
                                    <thead>
                                    <tr>
                                        <th>学号</th>
                                        <th>姓名</th>
                                        <th>成绩</th>
                                        <th>考试日期</th>
                                        <th>学分</th>
                                        <th>学期</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="stat in statistics" :key="stat.studentNo">
                                        <td>{{ stat.studentNo }}</td>
                                        <td>{{ stat.studentName }}</td>
                                        <td :class="{ 'missing-data': stat.score === undefined }">
                                            <label>
                                                <input type="number" class="grade-input"
                                                       v-model.number="stat.score"
                                                       min="0" max="100" step="0.5"
                                                       :placeholder="stat.score === undefined ? '未录入' : ''">
                                            </label>
                                        </td>
                                        <td :class="{ 'missing-data': stat.examDate === undefined }">
                                            <label>
                                                <input type="date" class="date-input"
                                                       v-model="stat.examDate"
                                                       :placeholder="stat.examDate === undefined ? '未录入' : ''">
                                            </label>
                                        </td>
                                        <td>{{ stat.credit }}</td>
                                        <td>{{ stat.semester }}</td>
                                    </tr>
                                    <tr v-if="!statistics || statistics.length === 0">
                                        <td colspan="8" style="text-align: center">暂无学生成绩信息</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 个人详细信息 -->
                <div v-if="activeView==='me'" class="content-section">
                    <h2>个人信息</h2>
                    <div class="card">
                        <div class="card-body">
                            <div class="teacher-info">
                                <div class="teacher-header">
                                    <div class="teacher-avatar">{{ teacher.name?.substring(0, 1) || '师' }}</div>
                                    <div class="teacher-name">{{ teacher.name }}</div>
                                    <div class="teacher-title">{{ teacher.title }}</div>
                                </div>

                                <div class="info-grid">
                                    <div class="info-card">
                                        <h3>基本信息</h3>
                                        <div class="info-detail">
                                            <span class="info-label">工号:</span>
                                            <span class="info-value">{{ teacher.userNo }}</span>
                                        </div>
                                        <div class="info-detail">
                                            <span class="info-label">姓名:</span>
                                            <span class="info-value">{{ teacher.name }}</span>
                                        </div>
                                        <div class="info-detail">
                                            <span class="info-label">职称:</span>
                                            <span class="info-value">{{ teacher.title }}</span>
                                        </div>
                                    </div>

                                    <div class="info-card">
                                        <h3>工作信息</h3>
                                        <div class="info-detail">
                                            <span class="info-label">入职年份:</span>
                                            <span class="info-value">20{{ teacher.hireYear }}年</span>
                                        </div>
                                        <div class="info-detail">
                                            <span class="info-label">所属学院:</span>
                                            <span class="info-value">{{ teacher.collegeName }}</span>
                                        </div>
                                        <div class="info-detail">
                                            <span class="info-label">学院代码:</span>
                                            <span class="info-value">{{ teacher.collegeCode }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- 修改密码 -->
                <div v-if="activeView==='password'" class="content-section">
                    <h2>修改密码</h2>
                    <div class="card">
                        <div class="card-body">
                            <form class="password-form" @submit.prevent="changePassword">
                                <div class="form-group">
                                    <label for="oldPassword" class="form-label">旧密码</label>
                                    <input type="password" id="oldPassword" class="form-control" v-model="oldPassword" required>
                                </div>

                                <div class="form-group">
                                    <label for="newPassword" class="form-label">新密码</label>
                                    <input type="password" id="newPassword" class="form-control" v-model="newPassword" required>
                                </div>

                                <div class="form-actions">
                                    <button type="submit" class="btn btn-primary">修改密码</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- 底部footer -->
    <footer class="footer">
        <div class="footer-content">
            <p>&copy; 2025简易学生成绩管理系统 | 技术支持：花椒关东煮</p>
            <p>联系电话：15570331235 | 邮箱：2023211001000210@ecjtu.edu.cn</p>
        </div>
    </footer>
</div>

<script src="${pageContext.request.contextPath}/js/vue.js"></script>
<script>
    // 创建Vue实例
    const {createApp} = Vue
    // 定义全局变量contextPath
    window.contextPath = "${pageContext.request.contextPath}"
    // 传递用户工号
    window.userNo = "${sessionScope.userNo}"
</script>
<script src="${pageContext.request.contextPath}/page/teacher/js/main.js"></script>
</body>
</html>
